<template>
  <div class="mainPage relative flex items-top min-h-screen bg-gray-100">
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <div class="flex flex-row flex-wrap" style="align-content: flex-start">
        <CardGroup isNewCard = "true"/>
      <div v-for="card in cardGroups">
        <CardGroup :showCardTitle="card.card_group_name" :cardGroupUid="card.card_group_uid" />
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      cardGroups: [
      ],
    };
  },
  mounted(){
      console.log(this.$store.state)
      if(!this.$store.state.info.isLogin){
          this.$message.error("需要登录使用此功能");
          setTimeout(()=>{
              this.$router.push({
                  path:'/'
              })
          },1000);
      }else{
          axios.post('/api/myCardGroups',{
              uid: this.$store.state.info.userInfo.uid
          }).then((res)=>{
              var cards = res.data.data
              console.log(cards)
              this.cardGroups = cards;
          })
      }
  },
  methods:{

  }
};
</script>
<style>
body {
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
}
.mainPage {
  padding: 20px;
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
}
</style>